.title_css_index {
    --nav-bar-background-color: none;
    --nav-bar-arrow-color: #fff;
    --nav-bar-text-color: #fff;
    --nav-bar-title-font-size: 18px;
    --nav-bar-title-text-color: #fff;
    --nav-bar-title-font-weight: 400;
  }
  
  .container {
    position: relative;
    width: 100%;
    height: 90vh;
  }
  
  .pump_image {
    background-color: rgba(218, 218, 218, 0.778);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    position: absolute;
    width: 90%;
    height: 38%;
    margin-top: 3%;
    margin-left: 5%;
   // 添加调试边框，确认容器是否正常显示
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    flex-direction: column; /* 子元素垂直分布 */
  }


  // 水平容器的样式
  .horizontalContainers {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 8%;
    // padding: 10px 20px;
    position: absolute;
    // bottom: 0;
    margin-bottom: -73%;

  }

  // 每个水平项的样式
  .horizontalItem {
    flex: 1;
    background-color:none;
    // background-color: rgb(246, 8, 8);
    border-radius: 4px;
    padding: 8px 0; // 添加内边距
    // margin: 0 5px;
    margin: 0; // 取消左右间距
    display: flex;
    justify-content: center;
    align-items: center;
  }

  // 水平项文字的样式
  .horizontalText {
    font-size: 14px;
    color: #000000;
    text-align: center;
  }

  
  
  .pump_switch {
    background-color: rgba(255, 255, 255, 0.268);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    position: absolute;
    width: 90%;
    height: 10%;
    margin-top: 85%;
    margin-left: 5%;
    display: flex;
    // justify-content: center;
    // align-items: center;
    justify-content: space-between; /* 让子元素水平分布并左右分散 */
    align-items: center;
    padding: 0 20px; /* 添加内边距 */
  }

  .sound_info {
    display: flex;
    flex-direction: row; /* 图标和文字水平排列 */
    align-items: center; /* 垂直居中 */
    gap: 5px; /* 图标和文字间距 */
    // width: 100%; /* 让sound_info占据整个pump_woker宽度 */
  }

  .sound_info > View {
    display: flex;
    flex-direction: column; /* 主副文本垂直排列 */
  }
  
  .sound_text {
    font-size: 16px;
    color: #000000;
  }

  /* 添加副文本样式 */
  .sound_sub_text {
    font-size: 12px; /* 设置副文本字体大小 */
    color: #999999; /* 设置副文本颜色为淡灰色 */
  }

  .verticalLayout {
    position: relative;
    display: flex;
    flex-direction: column;
    // width: 100%; // 增加垂直布局的宽度
    // min-width: 0; /* 防止flex子元素溢出 */
  }
  


.switch {
    position: relative;
    // width: 80px; /* 放大开关 */
    // height: 40px; /* 放大开关 */
    width: 64px; /* 原 80px，按 0.8 比例缩小 */
    height: 32px; /* 原 40px，按 0.8 比例缩小 */
    background-color: #6d6c6c;
    border-radius: 12%;
    transition: background-color 0.4s;
    display: flex;
    align-items: center;
    // padding: 0 12px;/* 修改为单边控制，减少左内边距 */
    // padding: 4 4px;/* 修改为单边控制，减少左内边距 */
    // padding-left: 0px; /* 可根据需求调整该值，让左侧有更少的间距 */
    padding: 0; /* 移除内边距，让滑块能覆盖到边缘 */
    margin: 0; /* 移除外边距 */;
    // margin-top: 10px; /* 上移 10px */
    // margin-left:270px; /* 左移 20px */
  }
  
  .switchOn {
    background-color: #6c0bffe5; /* 紫色背景 */
  }
  
  .switchLine {
    position: absolute; /* 让竖线脱离文档流 */
    width: 1px;
    height: 15px;
    background-color: rgba(232, 232, 232, 0.792);
    transition: all 0.4s;

    // margin:0 2px;
    // margin: 0; /* 移除外边距 */
  }

  
.switchLine:first-child {
    left: 5px; /* 设置左侧竖线的位置 */
}

/* 为右侧竖线添加额外的右外边距 */
  .switchLine:last-child {
    right: 5px; /* 设置右侧竖线的位置 */
}
  
  .lineShrink {
    transform: scaleY(0); /* 缩小效果 */
    opacity: 0.5;
  }
  
  .lineGrow {
    transform: scaleY(1.5); /* 放大效果 */
    opacity: 1;
  }
  
  .switchSlider {
    // width: 32px; /* 方形滑块 */
    // height: 32px; /* 方形滑块 */
    width: 25.6px; /* 原 32px，按 0.8 比例缩小 */
    height: 25.6px; /* 原 32px，按 0.8 比例缩小 */
    background-color: rgba(247, 247, 247, 0.764);
    border-radius: 15%;
    transition: transform 0.4s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 1;
    margin-left: 5%;
  }
  
//   .sliderOn {
//     transform: translateX(30px); /* 调整滑块移动距离 */
//   }

.sliderOn {
    // transform: translateX(calc(80px - 32px - 2px - 4px)); 
    transform: translateX(calc(64px - 25.6px - 2px - 4.2px)); 
// 计算滑块移动到最右边的距离,80px 是开关宽度,32px 是滑块宽度,2px 是竖线宽度 
}



.pump_woker {
    background-color: rgba(255, 255, 255, 0.268);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
    position: absolute;
    width: 90%;
    height: 10%;
    margin-top: 110%;
    margin-left: 5%;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    display: flex;
    justify-content: flex-start; /* 从center改为flex-start，使内容靠左 */
    align-items: center;
    padding-left: 20px; /* 添加左侧内边距，增加视觉效果 */
}

// 添加Slider专属样式，使其能够延伸更长
.sliderContainer {
    margin-top: 8%;
    width: 400%; // 让Slider容器充满可用空间
}

.pump_time {
  background-color: rgba(255, 255, 255, 0.268);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
  position: absolute;
  width: 90%;
  height: 10%;
  margin-top:135%;
  margin-left: 5%;
  display: flex;
  // justify-content: center;
  justify-content: space-between; /* 从center改为space-between，使内容分别靠左右两侧 */
  align-items: center;
  padding: 0 20px; /* 添加左右内边距，增加视觉效果 */
}

//底部弹窗UI
.content {
  display: flex;
  justify-content: center;
  font-size: 20px;
  // background: var(--app-B1, #f6f7fb);
  background-color: #fff;
  color: #fff;
  // color: var(--app-B4-N1, #3d3d3d);
  // width: 100px;
  height: 200px;
  // border-radius: 50%;
  // position: absolute;
  // bottom: 20px;
  // left: 50%;
  // transform: translateX(-50%);
  // z-index: 9999;
}

.footer {
  margin: 16px 0;
}


// .newContainer_2 {
//   // 可根据需求添加容器样式
//   background-color: rgb(255, 255, 255);
//   backdrop-filter: blur(10px);
//   border-radius: 10px;
//   border: 1px solid rgba(255, 255, 255, 0.18);
//   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); 
//   position: absolute;
//   width: 100%;
//   // height: 40%;
//   // margin-top: 7%;
//   // margin-left: 5%;
//   // margin-top: 65%;
//   // margin-left: 5%;
// }

.picker_style {
  --picker-option-unit-text-color:rgb(0, 0, 0);
  --picker-option-unit-font-size:14px;
  --picker-padding:0px;
}

.modeTitle {
  text-align: center;
  font-size: 18px;
  margin-bottom: 10px;
}

// .horizontalScroll {
//   display: flex;
//   overflow-x: hidden; /* 隐藏原生滚动条 */
//   white-space: nowrap;
//   -webkit-overflow-scrolling: touch;
// }

// .modePage {
//   display: inline-block;
//   width: 100%; /* 每个模式页宽度为容器宽度 */
//   white-space: normal;
//   box-sizing: border-box;
// }

// ... existing code ...

.tabContainer {
  display: flex;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.tabItem {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  cursor: pointer;
}

.activeTab {
  color: #6c0bffe5;
  border-bottom: 2px solid #6c0bffe5;
}

.newContainer_2 {
  // background-color: rgba(255, 255, 255, 0.268);
  background-color: #FFFFFF;
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* 隐藏超出容器的内容 */
}

// .modePage {
//   display: none;
//   width: 100%;
//   white-space: normal;
//   box-sizing: border-box;
//   padding: 16px;
//   position: absolute; /* 绝对定位，方便实现动画 */
//   margin-left: -5%;
//   margin-top: 0%;
//   opacity: 0;
//   transition: opacity 0.5s ease-in-out; /* 添加过渡动画 */
// }
.modePage {
  width: 100%;
  white-space: normal;
  box-sizing: border-box;
  padding: 0px;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.5s ease-in-out; /* 添加平移过渡动画 */
  margin: 0%;
}


.showPage {
  // display: block;
  // opacity: 1;
}

// ... existing code ...

.fogBubbleContainer {
  width: 10%;
  // height: 20%; /* 可根据需求调整高度 */
  /* 这里可添加雾气和气泡的样式，如背景渐变、动画等 */
  // position: relative;
  overflow: hidden;
  // background-color: #000000;
}

.imageContainer {
  width: 100%;
  height:100%; /* 可根据需求调整高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  }


.bubble {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5);
  animation-name: bubbleMove;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transform: translateX(-50%); /* 气泡水平居中 */
}

@keyframes bubbleMove {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100vh);
    opacity: 0;
  }
}
